<template>
	<view class="page" :style="{'--color': color}">
		<status-bar title="团队成员"></status-bar>
		<view class="Info" v-if="myInfo">
			<view class="userBox">
				<image :src="$imgUrls(myInfo.headimg)" mode="aspectFill" class="userImg"></image>
				<view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
			</view>
			<view class="flex-1 white">
				<view class="size30">{{ myInfo.name }}</view>
				<view class="size30 m-top10">{{ myInfo.tel }}</view>
			</view>
		</view>

		<view class="LvBox" v-if="myInfo">
			<text class="size30 color_33">团队等级</text>
			<view class="LvWrapper">
				<text class="size28">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
				<view class="content">
					<text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
					<view class="line">
						<u-line-progress :percentage="myInfo.upLevelInfo.proportion" height="9"
							activeColor="#ffcc00"></u-line-progress>
					</view>
				</view>
				<text class="size32 color_33">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
			</view>
		</view>



		<view class="Team">
			<view class="titleBox">
				<text class="black size30 bold500">团队成员</text>
				<view class="select" @click="show = true">
					<text class="black size28">{{ name }}({{ count }})</text>
					<view class="iconfont icon-xiasanjiaoxing black size28 p-left10"></view>
				</view>
			</view>

			<view class="list" v-for="(item, index) in pageData" :key="index" @click="toFans(item)">
				<view class="Infos">
					<view class="userBox">
						<image :src="$imgUrls(item.headimg)" mode="aspectFill" class="userImg"></image>
						<view class="Lvs">{{ item.team_name }}</view>
					</view>
					<view class="flex-1 d-flex f-column">
						<text class="ellipsis black size26">{{ item.name }}</text>
						<text class="color_33 h6 m-top6">{{ item.tel }}</text>
						<text class="color_33 h6 m-top6">{{ item.add_date }}</text>
					</view>
				</view>
				<view>
					<view class="perfTxt">自购:{{ item.my_order_num }}</view>
					<view class="perfTxt">业绩:{{ item.my_order_money }}</view>
					<view class="perfTxt">团队:{{ item.teamInfo.teamUserNum }}人</view>
					<view class="perfTxt">复购:{{ item.repurchase_order_num }}</view>
				</view>
			</view>

			<view class="p-top100 p-bot100" v-if="!pageData.length">
				<u-empty mode="list" text="暂无相关内容"></u-empty>
			</view>
		</view>

		<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Api from '@/common/Api.js'
	export default {
		data() {
			return {
				myInfo: '',
				pageData: [],
				cycle: [],
				page: 1,
				limit: 10,
				getMore: true,
				id: '',
				name: '全部',
				count: 0,
				show: false,
				columns: []
			}
		},
		computed: {
			...mapState(['color'])
		},
		onLoad() {
			this.getConfig()
			this.getLevelList()
		},
		methods: {
			async getConfig() {
				const result = await Api.getConfig()
				this.myInfo = result
			},
			getLevelList() {
				this.$http.post({
					url: '/gsyxcxApi/getLevelList'
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg)
					const result = res.data || []
					let count = 0
					result.forEach(item => {
						count = count + Number(item.count)
					})
					this.count = count
					result.unshift({
						id: '',
						name: '全部',
						count
					})
					this.columns.push(result)
					this.getTeamUserList()
				})
			},
			getTeamUserList() {
				this.$http.post({
					url: '/gsyxcxApi/getTeamUserList',
					data: {
						page: this.page,
						limit: this.limit,
						id: this.id
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg)
					const reuslt = res.data || []
					this.pageData = this.page == 1 ? reuslt : this.pageData.concat(reuslt)
					if (reuslt.length < this.limit) this.getMore = false
					this.cycle = res.cycle || []
				})
			},
			confirm(e) {
				this.id = e.value[0].id
				this.name = e.value[0].name
				this.count = e.value[0].count || 0
				this.page = 1
				this.getMore = true
				this.show = false
				this.getTeamUserList()
			},
			toFans(item) {
				this.toUrl(`/moneyPage/distributors/myFans?vid2=${item.v_id}`)
			}
		},
		onReachBottom() {
			if (!this.getMore) return
			this.page++
			this.getTeamUserList()
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2;
		padding-bottom: 24rpx;
	}

	.Info {
		background-color: var(--color);
		padding: 40rpx 24rpx;
		display: flex;
		align-items: center;
	}

	.userBox {
		width: 150rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		position: relative;

		.userImg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.Lvs {
			max-width: 100%;
			background-color: #ff9900;
			color: #fff;
			font-size: 22rpx;
			padding: 2rpx 10rpx;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}

	.LvBox {
		width: 690rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 24rpx auto 0;
		border-radius: 10rpx;

		.LvWrapper {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.content {
				flex: 1;
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.Txt {
					color: #b7655a;
					font-size: 26rpx;
				}

				.line {
					width: 100%;
					margin-top: 10rpx;
				}
			}
		}
	}

	.Team {
		width: 690rpx;
		margin: 30rpx auto 0;
		background-color: #fff;
		border-radius: 10rpx;

		.titleBox {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.select {
				display: flex;
				align-items: center;
			}
		}

		.list {
			padding: 20rpx;
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			align-items: center;

			.Infos {
				flex: 1;
				display: flex;
			}

			.perfTxt {
				color: #333;
				font-size: 24rpx;
				margin-top: 6rpx;
			}
		}
	}

	.swiper {
		height: 160rpx;
	}
</style>